import React, {useState,useEffect} from 'react';
import { Space, Table, Tag,Popconfirm,Card,Form,Input,Select,DatePicker  } from 'antd';
import type { TableProps } from 'antd';
import SearchForm from "@/view/subManager/subType/SearchForm";
import EditForm from '@/view/subManager/subType/EditForm';
import {ResponseType} from '@/api/indexType'
import request from "@/api/index";
import './index.less'
import {setSubOptions,setRAMOptions} from "@/redux/modules/subModule/action";
import {connect} from "react-redux";

const { Column } = Table;
const { RangePicker } = DatePicker;

interface DataType {
    key: string;
    _id:string;
    subName: string;
    subMoney: number;
    subDes:string;
    subRAM:string;
}


function User(props) {
    let {setSubOptions,setRAMOptions} = props
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<DataType[]>([]);
    const [rowData, setRowData] = useState({
        key:'',
        _id:'',
        subName: '',
        subMoney: 0,
        subDes:'',
        subRAM:'',
    });
    const [editModal, setEditModal] = useState(false);
    const [modalTitle, setModalTitle] = useState('');
    const [type, setType] = useState('');
    const [searchData, setSearchData] = useState({
        subName:'',
        subMoney:'',
    });
    const [pageInfo, setPageInfo] = useState({
        current:1,
        pageSize:10,
        total:0,
    });
    const RAMOptions =[
        { value: '5', label: '5T' },
        { value: '20', label: '20T' },
        { value: '100', label: '100T' },
    ]
    const subTypeOptions = [
        { value: '1', label: '月度' },
        { value: '2', label: '季度' },
        { value: '3', label: '年度' },
        { value: '4', label: '自定义' },
    ]

    useEffect(() => {
        setSubOptions(subTypeOptions)
        setRAMOptions(RAMOptions)
    }, []);


    useEffect(() => {
        toQuery({...searchData,...pageInfo})
    }, [searchData]);

    const toSearch = (data) => {
        setSearchData(data)
    }
    const toQuery = (data) => {
        setLoading(true)
        request.get({
            url:'/subInfo/list',
            data:{
                ...data,
                page:pageInfo.current,
                pageSize:pageInfo.pageSize,
            },
        }).then((res:ResponseType)=>{
            let {data,currentPage,pageSize,total} = res
            let list = data.map(item=>{
                return{
                    ...item,
                    key:item._id,
                }
            })
            setData(list)
            setPageInfo({
                current:currentPage,
                pageSize:pageSize,
                total:total
            })
        }).finally(()=>{
            setLoading(false)
        })
    }
    const toAdd = (data) => {
        setRowData({
            key:'',
            _id: '',
            subName: '',
            subMoney: 0,
            subDes:'',
            subRAM:'',
        })
        setType('add')
        setModalTitle('新增')
        setEditModal(true)
    }
    const edit = (record) => {
        setType('edit')
        setRowData(record)
        setModalTitle('编辑')
        setEditModal(true)
    }
    const modalOk = (data) => {
        if(type === 'add'){//新增
            subAdd(data)
        }else if(type === 'edit'){
            subEdit(data)
        }
        setEditModal(false)
    }
    const subAdd = (data) => {
        request.post({
            url:'/subInfo/addSubInfo',
            data:data,
        }).then((res)=>{
            toQuery({...searchData,...pageInfo})
        })

    }
    const subEdit = (data) => {
        request.post({
            url:'/subInfo/editSubInfo',
            data:{
                ...data,
                _id:rowData._id,
            },
        }).then((res)=>{
            toQuery({...searchData,...pageInfo})
        })
    }
    const modalCancel = () => {
        setEditModal(false)
    }
    const toRemove = (record) => {
        request.post({
            url:'/subInfo/delSubInfo',
            data:record,
        }).then((res)=>{
            toQuery({...searchData,...pageInfo})
        })
    }
    const delCancel = () => {
        console.log('delCancel-----')
    }
    const onChange = (pagination, filters, sorter, extra) => {
        setPageInfo({...pagination})
        toQuery({
            ...searchData,
            page:pagination.current,
            pageSize:pagination.pageSize,
        })
    }
    return (
        <div>
            <Card className="mt16">
                <SearchForm
                    add={toAdd}
                    RAMOptions={RAMOptions}
                    toSearch={toSearch}
                />
            </Card>
            <Card className="mt16">
                <Table dataSource={data} onChange={onChange}  pagination={pageInfo} loading={ loading }>
                    <Column title="名称" dataIndex="subName" key="subName" />
                    <Column title="内存"
                            dataIndex="subRAM"
                            key="subRAM"
                            render={(text, record) => (
                              <span>{text}T</span>
                            )}
                    />
                    <Column title="金额"
                            dataIndex="subMoney"
                            key="subMoney"
                            render={(text, record) => (
                                <span>{text}元</span>
                            )}
                    />
                    <Column title="描述" dataIndex="subDes" key="subDes" />
                    <Column
                        title="操作"
                        key="operation"
                        render={(_, record) => (
                            <Space>
                                <a onClick={() => edit(record)}>编辑</a>
                                <Popconfirm
                                    title="确定要删除此条数据吗"
                                    description=""
                                    onConfirm={()=>toRemove(record)}
                                    onCancel={delCancel}
                                    okText="是"
                                    cancelText="否"
                                >
                                    <a>删除</a>
                                </Popconfirm>
                            </Space>
                        )}
                    />
                </Table>
            </Card>
            <EditForm
                modalShow={editModal}
                title={modalTitle}
                modalOk={modalOk}
                cancel={modalCancel}
                data={rowData}
            />
        </div>
    );
}

const mapStateToProps = (state:any)=> state.subData
const mapDispatchToProps = {setSubOptions,setRAMOptions}
export default connect(mapStateToProps,mapDispatchToProps)(User);
